<template>
  <div class="main">
    <div class="outerDiv">
      <!-- <goBack :white="true" aa="./indexs" :hasTitle="true" topTitle="升学规划"></goBack> -->
      <!-- <goBack></ this.showBack = true>   -->
      <headerBack>
        <b slot="my-center" style="font-weight:600">升学规划</b>
      </headerBack>
      <scroller lock-x>
        <div style="margin-top: 0.8rem;">
          <div class="topHeaderMsg">
            <div class="dataGroup" style="margin-bottom: 0.2rem;">
              <div class="name">所在年级</div>
              <div class="data">{{ grade }}</div>
            </div>
            <div class="dataGroup">
              <div class="name">所在学期</div>
              <div class="data">{{ semester }}</div>
            </div>
          </div>
          <div class="mainContent">
            <div class="planList">
              <div class="singlePlan">
                <div class="topArea">
                  <div class="left">
                    <div class="stepNum">1</div>
                    <div class="stepTitle">成绩设定</div>
                  </div>
                  <div class="inputArea"><input type="number" placeholder="请输入目前成绩" v-model="performance" v-on:blur="changeScoreRecord" /></div>
                </div>
              </div>
              <div class="singlePlan" @click="goto('./majorModel')">
                <div class="topArea">
                  <div class="left">
                    <div class="stepNum">2</div>
                    <div class="stepTitle">选专业</div>
                  </div>
                  <div class="turnMore"><i></i></div>
                </div>
                <div class="bottomArea">{{ majorName ? majorName : '通过生涯测评或者自主选择目标专业'}}</div>
              </div>
              <div class="singlePlan" @click="goto('./collegeModel')">
                <div class="topArea">
                  <div class="left">
                    <div class="stepNum">3</div>
                    <div class="stepTitle">选院校</div>
                  </div>
                  <div class="turnMore"><i></i></div>
                </div>
                <div class="bottomArea">{{ academyName ? academyName : '通过模拟填报选择目标院校'}}</div>
              </div>
              <div class="singlePlan" @click="handleChoCollegeExam">
                <div class="topArea">
                  <div class="left">
                    <div class="stepNum">4</div>
                    <div class="stepTitle">选科</div>
                  </div>
                  <div class="turnMore"><i></i></div>
                </div>
                <div class="bottomArea">{{ courseName ? courseName : '通过生涯测评、优势学科排序和学校实情获得最佳选科组合'}}</div>
              </div>
              <div class="singlePlan" @click="handleShowSxRouterModel">
                <div class="topArea">
                  <div class="left">
                    <div class="stepNum">5</div>
                    <div class="stepTitle">选升学路径</div>
                  </div>
                  <div class="turnMore"><i></i></div>
                </div>
                <div class="bottomArea">{{ sxRouterName ? sxRouterName : '通过十七种升学路径找到定制升学方法'}}</div>
              </div>
              <div class="singlePlan" @click="handleIntoScoreDiffer">
                <div class="topArea">
                  <div class="left">
                    <div class="stepNum">6</div>
                    <div class="stepTitle">成绩差距</div>
                  </div>
                  <div class="turnMore"><i></i></div>
                </div>
                <div class="bottomArea">{{ (difference || difference == 0) ? difference : '通过各科目的成绩差距找到定制提放方案'}}</div>
              </div>
            </div>
            <div class="btnGroup">
              <div class="reportBtn" style="background: #FFD63D;" @click="goto('./history')">历史报告</div>
              <div :class="['reportBtn', isCanClick ? '' : 'cannotclick']" @click="handleCreateNewReport">生成报告</div>
            </div>
          </div>
          <div style="width: 100%; height: 2rem;"></div>
        </div>
      </scroller>
      
      <load-circle :showLoading="showLoading"></load-circle>
    </div>
  </div>  
</template>

<script>
import ls from "store2";
import { savePerformance, getDetails, createReport } from "~/api/colleges";
import headerBack from "~/components/headerBack";
import loadCircle from "./components/loadCircle";
export default {
  components: {
    headerBack,
    loadCircle
  },
  data() {
    return {
      userType: ls.get('userType'),
      isCanClick: false,
      semester: '', // 学期
      grade: '', // 年级
      performance: null, // 目前成绩
      stashScore: null, // 临时存储的成绩
      sxRouterName: null, // 升学路径名称
      majorName: null, // 专业
      academyName: null, // 院校名称
      courseName: null, // 选科名称
      difference: null, // 成绩差距
      showLoading: false,
    }
  },
  watch: {
    performance(string) {
      string = parseInt(string)
      if (string > 750) {
        this.performance = 750
      } else if (!string) {
        this.performance = 0
      } else {
        this.performance = parseInt(string)
      }
      if (this.performance && this.sxRouterName && this.majorName && this.academyName && this.courseName && (this.difference || this.difference == 0)) {
        this.isCanClick = true
      } else {
        this.isCanClick = false
      }
    },
    majorName(string) {
      if (this.performance && string && this.sxRouterName && this.academyName && this.courseName && (this.difference || this.difference == 0)) {
        this.isCanClick = true
      } else {
        this.isCanClick = false
      }
    },
    academyName(string) {
      if (this.performance && string && this.majorName && this.sxRouterName && this.courseName && (this.difference || this.difference == 0)) {
        this.isCanClick = true
      } else {
        this.isCanClick = false
      }
    },
    courseName(string) {
      if (this.performance && string && this.majorName && this.academyName && this.sxRouterName && (this.difference || this.difference == 0)) {
        this.isCanClick = true
      } else {
        this.isCanClick = false
      }
    },
    difference(string) {
      if (this.performance && (string || string == 0) && this.majorName && this.academyName && this.courseName && this.sxRouterName) {
        this.isCanClick = true
      } else {
        this.isCanClick = false
      }
    },
    sxRouterName(string) {
      if (this.performance && string && this.majorName && this.academyName && this.courseName && (this.difference || this.difference == 0)) {
        this.isCanClick = true
      } else {
        this.isCanClick = false
      }
    }
  },
  mounted() {
    this.$visit(this.$route.path)
    this.getSxPlanDetail()
    ls.remove('isHistory')
  },
  methods: {
    handleChoCollegeExam() {
      if (ls.get('collegeExamType') == 'old') {
        if (this.courseName) {
          this.goto('./wenLi', this.courseName)
        } else {
          this.goto('./wenLi')
        }
      } else {
        if (this.courseName) {
          this.goto('./courseModel', this.courseName)
        } else {
          this.goto('./courseModel')
        }
      }
    },
    changeScoreRecord() {
      if (this.difference) {
        this.$vux.toast.text('请进入“成绩差距”中修改成绩')
        this.performance = this.stashScore
      } else {
        savePerformance({
          performance: this.performance,
          userType: this.userType
        }).then(() => {})
      }
      window.scroll(0,0)
    },
    // 获取升学规划完成情况/刷新
    getSxPlanDetail() {
      this.$loading('open');
      getDetails({ userType: ls.get('userType') }).then(res => {
        this.grade = res.data.grade
        this.semester = res.data.semester
        this.performance = res.data.performance
        this.stashScore = res.data.performance // 临时存储
        this.sxRouterName = res.data.path
        this.majorName = res.data.major
        this.academyName = res.data.academyName
        this.difference = res.data.difference
        this.createPlanId = res.data.id
        if (ls.get('collegeExamType') == 'old') {
          this.courseName = res.data.type
        } else {
          this.courseName = res.data.subject
        }
      }).finally(() => {
        this.$hideLoading();
      })
    },
    goto(routerName, queryData) {
      this.$router.push({
        path: routerName,
        query: {
          type: queryData
        }
      });
    },
    // 显示‘升学路径’
    handleShowSxRouterModel() {
      if (this.sxRouterName) {
        this.goto('./sxRouterShowModel', this.sxRouterName)
      } else {
        this.goto('./sxRouterShowModel')
      }
    },
    // 生成新报告
    handleCreateNewReport() {
      if (this.isCanClick) {
        this.showLoading = true
        createReport({ id: this.createPlanId }).then(res => {
          ls.set('isHistory', false)
          // this.goto('./result', this.createPlanId)
          this.commonJs.gosto('./result', this.createPlanId)
        }).finally(() => {
          this.showLoading = false
        })
      }
    },
    handleIntoScoreDiffer() {
      if (!this.performance) {
        this.$vux.toast.text('请输入成绩！');
      } else if (!this.majorName) {
        this.$vux.toast.text('请选择专业！');
      } else if (!this.academyName) {
        this.$vux.toast.text('请选择院校！');
      } else if (!this.courseName) {
        this.$vux.toast.text('请选择科目！');
      } else if (!this.sxRouterName) {
        this.$vux.toast.text('请选择升学路径！');
      } else {
        this.goto('./scoreDifferenceModel');
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .outerDiv {
    width: 100%;
    height: 100vh;
    background: #F7F7FA;
    position: relative;
    .topHeaderMsg {
      padding: 0.3rem;
      background: #fff;
      .dataGroup {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 0.3rem;
        line-height: 0.42rem;
        .name {
          color: #999;
          margin-right: 0.38rem;
        }
        .data {
          color: #222;
          font-weight: bold;
        }
      }
    }

    .mainContent {
      padding: 0.24rem 0.32rem 0.54rem 0.3rem; 
      .planList {
        .singlePlan {
          background: #fff;
          margin-bottom: 0.32rem;
          width: 6.88rem;
          padding: 0.29rem 0.28rem 0.29rem 0.24rem;
          border-radius: 0.1rem;
          .topArea {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              .stepNum {
                border-radius: 50%;
                border: 0.08rem solid #EEEEEE;
                width: 0.6rem;
                height: 0.6rem;
                line-height: 0.45rem;
                box-sizing: border-box;
                text-align: center;
                color: @mainColor;
                font-size: 0.28rem;
                font-weight: bold;
                margin-right: 0.24rem;
              }
              .stepTitle {
                color: #222;
                font-size: 0.3rem;
                font-weight: bold;
              }
            }
            .inputArea {
              input {
                width: 3.44rem;
                height: 0.64rem;
                border-radius: 0.32rem;
                border: none;
                outline: none;
                background: #F7F7FA;
                text-align: center;
                font-size: 0.28rem;
                font-weight: bold;
                color: #222;
              }
              input::-webkit-input-placeholder { /* WebKit browsers */  
                color: #C7C7C7;  
              }  
              input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */  
                color: #C7C7C7;  
              }  
              input::-moz-placeholder { /* Mozilla Firefox 19+ */  
                color: #C7C7C7;  
              }  
              input:-ms-input-placeholder { /* Internet Explorer 10+ */  
                color: #C7C7C7;  
              }  
            }
            .turnMore {
              width: 0.4rem;
              height: 0.4rem;
              i {
                width: 100%;
                height: 100%;
                  display: inline-block;
              background: url('~@/static/sprite/icon_sprites_40.png') -1.3rem -0.7rem;
              background-size:3rem 2.4rem;
              }
            }
          }
          .bottomArea {
            margin-left: 0.84rem;
            margin-top: 0.08rem;
            color: #999;
            font-size: 0.26rem;
            line-height: 0.37rem;
            width: 4.8rem;
          }
        }
      }
    }

    .btnGroup {
      width: 100%;
      height: 1.52rem;
      // background: #fff;
      padding: 0.32rem 0;
      margin-top: 1rem;
      // box-shadow:0px -4px 10px 0px rgba(204,204,204,0.2);
      display: flex;
      justify-content: space-between;
      align-items: center;
      // position: fixed;
      // left: 0;
      // bottom: 0;
      .reportBtn {
        width: 3.31rem;
        height: 0.88rem;
        line-height: 0.88rem;
        background: @mainColor;
        text-align: center;
        color: #fff;
        font-size: 0.28rem;
        font-weight: bold;
        border-radius: 0.44rem;
      }
      .cannotclick {
        opacity:0.3;
      }
    }
  }
  @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    /*增加底部适配层*/
    .has-bottombar {
      bottom: 1.4rem !important;
    }
    .iponexStone{
    height: 1rem;
    }
  }
  @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
    /*增加底部适配层*/
    .has-bottombar {
      bottom: 2rem !important;
    }
    .iponexStone{
      height: 1.6rem;
    }
  }
</style>
